<template>
  <div>
    <el-container>
      <el-header style="background-color:rgb(51,51,51);padding: 0px;color: white;">
        <el-row style=" height: 100%;width:100%;margin:0px;">
          <el-col :span="8"
                  style="height: 100%;display: flex;align-items: center; justify-content: center;font-size: 24px;font-weight: bolder;">
            EMALL一站式购物平台 <span @click="handleGoHome"
                               style="font-size: 16px;display: flex;align-items: center;margin-left: 30px;cursor: pointer;">首页</span>
            <a
              target="_blank"
              href="http://123.57.7.108:82" style="color:white;font-size: 16px;display: flex;align-items: center;margin-left: 30px;cursor: pointer;">去往后台管理系统</a>
          </el-col>
          <el-col :span="8" v-if="user" style="float: right;padding-right: 30px;">

            <el-col :span="6">
              <el-popover
                placement="bottom-start"
                title="最新加入的商品"
                width="800"
                trigger="hover"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                <el-button slot="reference"
                           @click="handleCartClick"
                           style="background-color:rgb(51,51,51);border:0px solid #eeeeee;color:white;font-size:20px;display: flex;align-items: center;">
                  <i class="el-icon-shopping-cart-full"></i> 我的购物车
                </el-button>
                <div>
                  <el-row :class="['cart-item']" v-for="(item,index) of cart.items" :key="''+item.id"
                          style="border-bottom:1px solid #eeeeee;padding-top:20px;">
                    <el-col :span="2">
                      <el-image @click="handleCartClick" :src="imageServer+'/'+item.skuImage"></el-image>
                    </el-col>
                    <el-col :span="16">
                      <span @click="handleCartClick">{{item.skuName}}</span>
                    </el-col>
                    <el-col :span="4" style="padding-left: 20px;">
                      <el-row style="text-align: right;">
                        <span style="color: red;">¥{{(item.skuPrice/100).toFixed(2)}}</span> x <span
                        style="font-weight: bolder;">{{item.skuCount}}</span>
                      </el-row>
                      <el-row style="text-align: right;color: gray;">
                        <span @click="handleCartItemDelete(index)">删除</span>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>
              </el-popover>
            </el-col>
            <el-col :span="6" style="text-align: center;font-size: 20px;display: flex;align-items: center;">
              <span
                @click="handleOrderClick"
                style="margin:10px;cursor: pointer;display: flex;align-items: center;">我的订单</span>
            </el-col>
            <el-col :span="6" style="text-align: center;font-size: 20px;display: flex;align-items: center;">
              <el-dropdown @command="handleCommand" style="display: flex;align-items: center;">
                <span class="el-dropdown-link" style="color: #eeeeee; font-size: 20px;display: flex;align-items: center;align-content: center;">
                  {{user.username}}<i class="el-icon-arrow-down el-icon--right" style="display: flex;align-items: center;"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="info">个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout">退出</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
              <!--欢迎 <span style="margin:10px;cursor: pointer;display: flex;align-items: center;">{{ user.username }}</span> 登录-->
            </el-col>
          </el-col>
          <el-col v-else :span="2" style="float: right;padding-right: 30px;">
            <el-row>
              <el-col :span="12">
                <router-link to="/login"
                             style="color: white;display: flex;align-items: center; justify-content: center;">登录
                </router-link>
              </el-col>
              <el-col :span="12" style="float:right;">
                <router-link to="/register"
                             style="color: white;display: flex;align-items: center; justify-content: center;">注册
                </router-link>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="padding-top:30px;">
        <el-row style="display: flex;justify-content: center;">
          <el-col :span="24">
            <router-view></router-view>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getUser, removeToken, removeTokenHead, removeUser, removeTokenHeaderName} from "../util/auth";
  import ProdList from './comps/ProdList'
  export default {
    name: "Home",
    components: {
      ProdList
    },

    created() {
      console.log("home created");

      this.api.__api__GetImageServer()
        .then(data => {
          this.$store.commit("setImageServer", data.data);
        })

      const user = getUser();
      this.$store.commit("setUser", user);

      this.api.__api__Cart(user.id)
        .then(data => {
          this.$store.commit('setCart', data.data);
          console.log("home set cart...")
        })
    },

    computed: {
      ...mapState({
        user: state => state.auth.user,
        cart: state => state.auth.cart,
        imageServer: state => state.prod.imageServer
      })
    },

    methods: {
      handleLogout() {
        this.api.__api__Logout()
          .then(data => {
            removeUser();
            removeTokenHeaderName();
            removeTokenHead();
            removeToken();
            this.$router.push("/login");
          }).catch(error => null)
      },

      handleCartItemDelete(index) {
        const skuId = this.cart.items[index].skuId;

        this.api.__api__CartUpdate(this.cart.id, skuId, 0)
          .then(data => {
            this.$store.commit('setCart', data.data);
          }).catch(error => null)
      },

      handleCartClick() {
        this.$router.push("/cart").catch(error => null);
      },

      handleGoHome() {
        this.$router.push("/home").catch(error => null);
      },

      handleOrderClick() {
        this.$router.push("/order").catch(error => null);
      },

      handleCommand(command){
        if(command=='info'){
          this.$router.push("/customer").catch(error=>null);
        }else if(command=='logout'){
          this.handleLogout();
        }
      },

      test(){
        console.log("test....")
      }
    }
  }
</script>

<style scoped>

  .el-header * {
    height: 100%;
  }

  a {
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }

  .cart-item:hover {
    background-color: #eeeeee;
  }

  .cart-item {
    cursor: pointer;
  }


</style>
